import Taro, { Component } from '@tarojs/taro'
import { View, Text, Swiper, SwiperItem, Image, ScrollView, RichText } from '@tarojs/components'
import { AtToast } from 'taro-ui'
import { connect } from '@tarojs/redux'
import * as actions from '@actions/product'
import ProdItemBanner from './prod-item-banner'
import ProdItemInfo from './prod-item-info'
import ProdComment from './comment'
import { split } from '@utils/utils'
import homepage from '@assets/tab-bar/homepage.png'
import basket from '@assets/tab-bar/basket.png'
import './index.scss'
import Sku from './sku'

@connect(state => state.product, { ...actions })
class prodDetail extends Taro.Component {
    constructor(props) {
        super(props)
        this.prodId = this.$router.params.prodId
    }
    state = {
        loading: false,
        loaded: false,
        isCollection: false,
        totalCartNum: 0
    }
    componentDidMount() {
        this.props.dispatchProdInfo({ prodId: this.prodId }).then(() => {
            this.setState({
                loaded: true
            })
        })
    }
    /**
     * 返回首页
     */
    toHomePage() {
        Taro.navigateTo({
            url: '/pages/home/home'
        })
    }

    /**
     * 购物车
     */
    toCartPage() {
        Taro.navigateTo({
            url: ''
        })
    }
    /**
     * 添加购物车
     */
    addToCart() {
        const cartNum = this.state.totalCartNum
        this.setState({
            totalCartNum: cartNum + 1
        })
    }
    render() {
        const { imgs, pic, prodName, brief, skuList = [], price, content } = this.props.prodInfo
        const { loaded, loading } = this.state
        const prodId = this.prodId
        if (!loaded) {
            return <AtToast isOpened text="加载中"></AtToast>
        }
        return (
            <View className="container">
                {loaded &&
                    <View>
                        <ProdItemBanner list={split(imgs)} />

                        <ProdItemInfo prodName={prodName} brief={brief} defaultSku={skuList[0]} />

                        <Sku list={skuList} price={price} pic={pic} defaultSku={skuList[0]} />

                        <ProdComment prodId={prodId} />

                        {/* <!-- 商品详情 --> */}
                        <View className="prod-detail">
                            <View>
                                <RichText nodes={content}></RichText>
                                {/* <!-- <image src="//img14.360buyimg.com/cms/jfs/t1/25195/1/9487/388554/5c7f80a5E8b8f8f0c/46818404849d6ec6.jpg!q70.dpg" mode="widthFix"></image> --> */}
                            </View>
                        </View>
                        {/* <!-- end 商品详情 --> */}

                        {/* <!-- 底部按钮 --> */}
                        <View className="cart-footer">
                            <View className="btn icon" onClick={() => this.toHomePage()}>
                                <Image className="image" src={homepage} />
                                首页
                            </View>
                            <View className="btn icon" bindtap='toCartPage'>
                                <Image className="image" src={basket} />
                                购物车
                                <View className='badge badge-1' if="{{totalCartNum>0}}">{this.state.totalCartNum}</View>
                            </View>
                            <View className="btn cart" onClick={() => this.addToCart()}>
                                <Text>加入购物车</Text>
                            </View>
                            <View className="btn buy" bindtap='buyNow'>
                                <Text>立即购买</Text>
                            </View>
                        </View>

                        {/* <!-- end 底部按钮 --> */}

                    </View>
                }
            </View>
        )
    }

}
export default prodDetail